<template>
  <div>
    <van-dropdown-menu active-color="#ee0a24">
      <van-dropdown-item title="综合" disabled />
      <van-dropdown-item title="价格" v-model="value1" :options="option1" />
      <van-dropdown-item title="分类" v-model="value2" :options="option2" />
      <!-- aaaa -->
    </van-dropdown-menu>
    <keep-alive>
      <ProductList :goodsList="goodsList" />
    </keep-alive>
    <!-- <ProductList :goodsList="mydata" v-if="value1==1"/> -->
  </div>
</template>
 
<script>
import { GetGoodList } from "@/request/api";
import ProductList from "./ProductList";

export default {
  data() {
    return {
      value1: 3,
      value2: 0,
      option1: [
        { text: "价格由低到高", value: 0 },
        { text: "价格由高到低", value: 1 },
      ],
      option2: [],
      filterCategory: [],
      // goodsList:[],
      mydata: [],
    };
  },
  created() {
    GetGoodList().then((res) => {
      // this.option2 = res.data.filterCategory;
      let filterCategory = res.data.filterCategory;
      for (let i = 0; i < res.data.filterCategory.length; i++) {
        this.option2.push({
          value: filterCategory[i].id,
          text: filterCategory[i].name,
          checked:filterCategory[i].checked
        });
      }
    });
  },
  watch: {
    value2: {
      handler(val) {
        // console.log(this.option2[val].text);
        // GetGoodList({ keyword: this.option2[val].text }).then((res) => {
        //   this.$store.commit("Search", res.data.goodsList);
        // });
        this.$emit("category",val)
      },
    },
    value1(val) {
      let data = this.$store.state.goodsList;
      let order = val == 0?"asc":"desc";
      this.$emit("pricesort",order);
    },
  },
  components: {
    ProductList,
  },
  computed: {
    goodsList(){
      return this.$store.state.goodsList;
    }
  },
};
</script>
 
<style lang = "less" scoped>
</style>